<template> 
	<view class="box" v-if="list.length>0"> 
		<block>
			<view class="box-title coreshop-flex coreshop-align-center" @click="open = !open">
				<view class="coreshop-flex-sub">❉ {{title}}</view>
				<u-icon :name="open ? 'arrow-down' : 'arrow-right' " color="#fff" size="20" class="u-m-l-10"></u-icon>
			</view>
			<view v-show="open">
				<view v-for="(item,index) in list" :key="index" class="plan-list">
					<view class="head">
						<view class="coreshop-flex coreshop-justify-between">
							{{item.jh.gzjh}}
							<u-tag :text="$common.getLabelFromID(item.jh.jhlx,typeList) || '--' " size="mini" shape="circle" plain/>
						</view>
						
						<view class="coreshop-flex plan-auth">
							<view class="head-box">{{item.jh.addAccName[0]}}</view>
							{{item.jh.addAccName || '--'}}
							<text class="update-time">{{$common.longDateFormate(item.jh.date,'ymd')}}~{{$common.longDateFormate(item.jh.endDate,'ymd')}}</text>
						</view>
					</view>
					<!-- 详情 -->
					<view>
						<view v-for="(items,idx) in item.planDetails" :key="idx" class="list"> 
							<view v-if="items.jhxq.id == editID">
								<edit-item
									:userData="userData"
									:planInfo="item.jh"
									:item="items"
									@Sure="getYesterDayList"
									@Cancel="editID = null">
								</edit-item>
							</view>
							<view v-else class="plan-item">
								<view class="coreshop-flex coreshop-justify-between plan-fl">
									<view class="coreshop-flex-sub select-text">
										<text selectable user-select>{{items.jhxq.jhfl}}</text>
									</view>
									<u-icon name="edit-pen" color="#2A8FFC" @click="edit(items)" v-if="item.jh.ywyid == userData.id"></u-icon>
								</view>
								<view v-for="(detailItem,detailIdx) in items.jhxqitems" :key="detailIdx" class="detail-info">
									<view class="coreshop-flex coreshop-align-start">
										<view class="coreshop-flex coreshop-flex-sub plan-info coreshop-align-start">
											<view class="coreshop-flex-sub select-text">
												<text selectable user-select>{{detailItem.jhxqitem.jhxq}}</text>
											</view>
											<view class="add-explain" @click="clickShowExplainPop(item,items,detailItem)" v-if="detailItem.jhxqitem.jhzt=='1'">
												<view class="coreshop-flex add-explain-bg">
													<u-icon name="plus" custom-prefix="custom-icon" color="#fff" size="16" bold="true"></u-icon>
												</view>
												完成情况
											</view>
										</view>
									</view>
									<!-- 完成情况显示 -->
									<view class="card-foot" v-if="detailItem.wcqk && detailItem.wcqk.length > 0">
										<view v-for="(i,idxs) in detailItem.wcqk" :key="idxs" class="coreshop-flex coreshop-align-start">
											{{i.AddAccName}}：  
											<view class="coreshop-flex-sub word-break">
												<text>{{i.QKSM || '--'}}</text>
											</view>
										</view>
									</view>
								</view>
								<!-- 关联人，客户与完成时间 -->
								<template v-if="$common.longDateFormate(items.jhxq.CompletionTime) || items.glkh.length || items.glr.length">
									<plan-correlation :info="{
										time: items.jhxq.completionTime,
										glkh: items.glkh,
										glr: items.glr
									}"></plan-correlation>
								</template>
							</view>
						</view>
					</view>
				</view>
			</view>
		 </block>
	</view> 
</template>

<script>
	import planCorrelation from '@/pages/member/agent/components/planCorrelation/index-new.vue'; //关联的人员、客户 完成时间 
	import editItem from './editItem.vue'; //已发布的计划
	
	
	export default{
		props:{
			title:{
				type:String,
				default:''
			},
			userData:{
				type:Object,
				default:{}
			},
			planInfo:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				list:[],
				typeList: this.$db.get('workPlanType'),
				open:true,
				// 计划修改
				editID: null,

			}
		},
		components:{
			planCorrelation,
			editItem
		},
		created() { 
			console.log("userData",this.userData); 
			this.getYesterDayList();
		},
		methods:{ 
			// 获取昨日未完成计划
			getYesterDayList(){
				let self=this;
				this.list=[];
				this.$u.api.getYesterdayUndonePlan().then(res => {
					let list = res.data || [];
					
					list.forEach((item,index)=>{
						let jh={
							ID:item.id,
							ywyid:item.ywyid,
							gzjh:item.gzjh,
							jhlx:item.jhlx,
							addAccName:item.addAccName,
							date:item.date,
							endDate:item.endDate,
						};
					 
						let planDetails=[]; 
						item.planDetails.forEach((xq)=>{  
							let jhxq={
								id:xq.id,
								jhfl:xq.jhfl,
								rowID:xq.rowID 
							};
							
							let jhxqitems=[]; 
							let glr=[];
							let strGlr="";
							let glkh=[];
							let strGlrkh="";
							let time="";
							let wcqkArr=[]
							
						    let detailItem = item.planDetailItems.filter(c=>c.jhid==item.id);
							let planFinishs=item.planFinishs.filter(c=>c.jhid==item.id);  //完成情况 
							detailItem.forEach((xqItem)=>{ 
								let jhxqitem={
									id:xqItem.id,
									jhxq:xqItem.jhxq,
									jhzt:xqItem.jhzt,
									rowID:xqItem.rowID
								};
								//完成情况
								let finishModel=planFinishs.find(c=>c.jhxqid==xqItem.id);
								if(finishModel!=null){ 
									wcqkArr.push({
										AddAccName:finishModel.addAcc,
										QKSM:finishModel.qksm
									})
									jhxqitems.push({
										jhxqitem:jhxqitem,
										wcqk:wcqkArr
									});
								} else{
									jhxqitems.push({
										jhxqitem:jhxqitem,
									});
								}
								
								if(strGlr !=xqItem.glr && xqItem.glr!=""){  //一个计划只有对应的关联人与后台不同
									let glrArr=xqItem.glr.split("|");
									let glrnameArr=xqItem.glrName.split("|");
									for (var i = 0; i < glrArr.length; i++) { 
										glr.push({
											glr:glrArr[i],
											glrname:glrnameArr[i],
										});
									}	 
								}
								strGlr=xqItem.glr;
								
								if(strGlrkh !=xqItem.glkh && xqItem.glkh!=""){  //关联客户是单选
									glkh.push({
										glkh:xqItem.glkh,
										glkhname:xqItem.glkhName,
									});	 
								}
								strGlrkh=xqItem.glkh;
								
								jhxq.completionTime=xqItem.completionTime;
							})
							
							
							planDetails.push({
								jhxq:jhxq,
								jhxqitems:jhxqitems,
								glr:glr,
								glkh:glkh
							}) ; 
						})
						 
						self.list.push({
							jh:jh,
							planDetails:planDetails
						})
					}); 
					console.log(self.list);
				})
			},
			clickShowExplainPop(info,flInfo,xqInfo){
				this.$emit('bindExplain', {
					t: 'yesterday',
					jh: info.jh,
					jhfl: flInfo.jhxq,
					detail: xqInfo.jhxqitem
				});
			},
			edit(d){
				this.editID = d.jhxq.id;
				this.editItem = d;
			},
			editSure(d){
				const JHXQList = (d.JHXQList || []).filter(item=>item);
				if(JHXQList.length==0){
					return uni.showToast({
						title:'请至少添加一条事项！',
						icon:'none'
					})
				}
				if(!d.jhxq.JHFL){
					return uni.showToast({
						title:'请输入计划事项！',
						icon:'none'
					})
				}
				if(d.jhxq.Sales && !d.jhxq.JHSLLX){
					return uni.showToast({
						title:'请选择计划数量类型！',
						icon:'none'
					})
				}
				
				if(d.jhxq.Sales && !this.$Utils.myIsNaN(d.jhxq.Sales*1)){
					return uni.showToast({
						title:'销售额格式不正确',
						icon:'none'
					})
				}
				
				let detail = {
					JHFL:d.jhxq.JHFL,
					JHXQ:JHXQList.join('|'),
					Sales:d.jhxq.Sales,
					JHSLLX:d.jhxq.JHSLLX || '',
					CompletionTime : this.$Utils.longDateFormate(d.jhxq.CompletionTime),
					OldJHID:'',
					JHZT:'1',
					QKSM:'',
					XCBFSJ:'',
					ActualAmount:0,
					RelationalSchemaID:'',
					GLR: d.glrList || [],
					GLKH: d.glkhList || [],
					ROWID:d.jhxq.RowID || ''
				}
				
					
				let params = {
					JHID : d.jhxq.JHID,
					XQID : d.jhxq.ID,
					JHXQ : JSON.stringify([detail])
				};
				console.log('aaaa',params);
				uni.showModal({
					content:'确认修改此条事项?',
					success:e=>{
						if(e.confirm){
							uni.showLoading({
								title:'加载中',
								mask:true
							})
							this.$minApi.app._EditRelationalByJHXQ(params).then(res=>{
								uni.hideLoading();
								uni.showToast({
									title:'操作成功！',
									mask:true
								})
								setTimeout(()=>{
									this.editID = null; 
									this.getYesterDayList();
								},1000)
							}).catch(()=>{
								
							})
						}
					}
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		border: 1px solid #f29100; 
	}
	.plan-list{
		border-top: 1px solid #eee;
	}
	.plan-item{
		padding: 0 20rpx 10rpx;
	}
	.box-title{
		font-size: 28rpx;
		font-weight: bold;
		padding: 20rpx;
		background-color: #f29100;
		color: #fff;
	}
	.head{
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		.head-box{
			width: 41rpx;
			height: 41rpx;
			background-color: #2A8FFC;
			border-radius: 50%;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 41rpx;
			margin-right: 9rpx;
		}
		.plan-auth{
			font-size: 24rpx;
			color: #333333;
			.update-time{
				color: #A7AAB0;
				margin-left: 17rpx;
			}
		}
	}
	.title{
		width: 120rpx;
		font-size: 24rpx;
		color: #666;
		text-align: right;
		margin-right: 10rpx;
	}
	.list{
		border-top: 1px dashed #eee;
	}
	.plan-fl{
		padding: 20rpx 20rpx 10rpx 0;
	}
	.detail-info{
		border-radius: 20rpx;
		background: #F1F1F5;
		margin: 10rpx 0;
		padding: 20rpx;
	}
	
	.plan-info{
		word-break: break-all;
	}
	.add-explain{
		font-size: 20rpx;
		color: #FF8A00;
		line-height: 36rpx;
		margin-left: 10rpx;
		float: right;
		display: inline-block;
		min-width: 80rpx;
		.add-explain-bg{
			width: 50rpx;
			height: 50rpx;
			background-color: #FF8A00;
			border-radius: 50%;
			justify-content: center;
			margin: 0 auto;
		}
	}
	.sales-box{
		background: #F1F1F5;
		border-radius: 20rpx;
		padding: 0 20rpx;
		height: 80rpx;
		color: $core-type-primary-dark;
		.sales-input{
			width: 300rpx;
			padding: 0 10rpx;
			color: #303133;
		}
	}
	.card-foot{
		color: $core-type-primary-dark;
		border-top: 1px solid #e4e7ed;
		padding-top: 10rpx;
		&:nth-child(1){
			margin-top: 10rpx;
		}
	}
	
		.select-text{
			user-select:text!important;
			-webkit-user-select:text!important;
		}
</style>
